import cls from 'classnames';
import React from 'react';
import { HelpInfo } from './HelpInfo/index.jsx';
import { Typography } from './Typography/index.jsx';
import Style from './index.module.less';
/**
 * 副标题组件
*/
export const SubTitle = React.memo(({ suffix, suffixStyle, title = null, wrapStyle = {}, titleClassName, className, as = 's5', useBold = true, titleStyle, extraText, extraTextProp, symbol = false, helpInfo }) => (<div className={cls(Style.subtitle_wrap, className)} style={{ ...wrapStyle }}>
  {symbol && <div className={Style.symbol} />}
  <div className={cls(Style.title, titleClassName)}>
    <Typography as={as} useBold={useBold} style={titleStyle}>
      {title}
    </Typography>
    {extraText && (<Typography as='s1' style={titleStyle} {...extraTextProp} type="info">
      {extraText}
    </Typography>)}
    {helpInfo && (<HelpInfo {...helpInfo} />)}
    {suffix ? <div style={suffixStyle} className={suffixStyle ? '' : Style.suffix}>{suffix}</div> : null}
  </div>
</div>));
export default SubTitle;
